<template>
	<view class="home-container">
		<mysearch></mysearch>
		
		<!-- 轮播图区域 - 使用随机菜品图片 -->
		<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(dish, index) in bannerDishes" :key="index">
				<view class="banner-item" @click="viewDishDetail(dish)">
					<image :src="dish.image || '/static/default-dish.png'" mode="aspectFill" class="banner-image"></image>
					<view class="banner-overlay">
						<text class="banner-title">{{ dish.name }}</text>
						<text class="banner-price">¥{{ dish.price }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 分类菜品展示区域 -->
		<view class="category-dishes-container">
			<view v-for="category in categoriesWithDishes" :key="category.id" class="category-section">
				<!-- 分类标题 -->
				<view class="category-header">
					<text class="category-title">{{ category.name }}</text>
				</view>
				
				<!-- 菜品网格 - 每行3个 -->
				<view class="dishes-grid">
					<view 
						v-for="dish in category.dishes" 
						:key="dish.id" 
						class="dish-card"
						@click="viewDishDetail(dish)"
					>
						<image :src="dish.image" mode="aspectFill" class="dish-image"></image>
						<view class="dish-info">
							<text class="dish-name">{{ dish.name }}</text>
							<text class="dish-price">¥{{ dish.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerDishes: [], // 轮播图菜品
				categories: [], // 分类列表
				allDishes: [], // 所有菜品
				categoriesWithDishes: [] // 包含菜品的分类
			}
		},
		methods: {
			async request(url, method = 'GET', data = {}) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:8080' + url,
						method,
						data,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},

			// 加载分类数据
			async loadCategories() {
				try {
					const res = await this.request('/category/list')
					if (res.code === 200) {
						this.categories = res.data || []
					}
				} catch (error) {
					console.error('加载分类失败:', error)
					uni.showToast({
						title: '加载分类失败',
						icon: 'none'
					})
				}
			},

			// 加载所有菜品数据
			async loadAllDishes() {
				try {
					const res = await this.request('/dish/list')
					if (res.code === 200) {
						this.allDishes = res.data || []
						this.processCategoryDishes()
						this.setBannerDishes()
					}
				} catch (error) {
					console.error('加载菜品失败:', error)
					uni.showToast({
						title: '加载菜品失败',
						icon: 'none'
					})
				}
			},

			// 处理分类和菜品的对应关系
			processCategoryDishes() {
				this.categoriesWithDishes = this.categories.map(category => {
					return {
						...category,
						dishes: this.allDishes.filter(dish => dish.categoryId === category.id).slice(0, 6) // 每个分类最多显示6个菜品
					}
				}).filter(category => category.dishes.length > 0) // 只显示有菜品的分类
			},

			// 设置轮播图菜品（随机选择）
			setBannerDishes() {
				// 随机选择3-5个菜品作为轮播图
				const shuffled = [...this.allDishes].sort(() => 0.5 - Math.random())
				this.bannerDishes = shuffled.slice(0, Math.min(5, shuffled.length))
			},
			
			// 查看菜品详情
			viewDishDetail(dish) {
				uni.navigateTo({
					url: `/pages/display/display?dishId=${dish.id}`
				})
			},

			// 初始化数据
			async initData() {
				await this.loadCategories()
				await this.loadAllDishes()
			}
		},
		onLoad() {
			this.initData()
		}
	}
</script>

<style>
.home-container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.banner-swiper {
  height: 350rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 20rpx;
  color: white;
}

.banner-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.banner-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffd700;
}

.category-dishes-container {
  margin-bottom: 30rpx;
}

.category-section {
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.category-header {
  padding: 24rpx;
  background-color: #e74c3c;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.dishes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
}

.dish-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.dish-card:active {
  transform: scale(0.98);
}

.dish-image {
  width: 100%;
  height: 180rpx;
}

.dish-info {
  padding: 16rpx;
}

.dish-name {
  display: block;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-price {
  font-size: 26rpx;
  color: #e74c3c;
  font-weight: bold;
}
</style>